<template>
  <!-- 系统消息 -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      v-show="showSearch"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="消息类型" prop="theType">
        <el-select v-model="queryParams.theType" @change="handleQuery" clearable placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字" prop="keywords">
        <el-input
          v-model="queryParams.keywords"
          placeholder="请输入标题"
          learable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="tableList"
      :border="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="消息类型" prop="typeVal" align="center" />
      <el-table-column  label="消息标题" prop="title" align="center">
        <template slot-scope="scope">
          <span @click="displaypop(scope.row)" class="active">
            {{ scope.row.title }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="发布人数" prop="personnelNum" align="center">
        <template slot-scope="scope">
          <span @click="handleSee(scope.row)" class="active">
            {{ scope.row.nickName }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column label="发布人数" prop="personnelNum" align="center" />
      <el-table-column label="添加时间" align="center" prop="reviewTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.reviewTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布人" prop="reviewer" align="center" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pagesize"
      @pagination="getList"
    />

    <!-- 添加或修改角色配置对话框 -->
    <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form-item label="类型" prop="roleIds">
        <el-select v-model="form.roleIds" placeholder="请选择类型">
          <el-option
            v-for="item in roleOptions"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消息标题" prop="userName">
        <el-input v-model="form.userName" placeholder="消息标题" />
      </el-form-item>
      <el-form-item label="配图" prop="img">
        <uploadImage v-model="form.img" />
      </el-form-item>
      <el-form-item label="消息内容" prop="phonenumber">
        <editor v-model="form.dictLabel" :min-height="192" />
      </el-form-item>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> -->
   
    <!-- 显示弹窗 -->
    <el-dialog
      title="显示消息"
      :visible.sync="openset"
      width="700px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :validate-on-rule-change="false"
        label-width="80px"
      >
      <el-row>
        <el-col :span="12">
          <!-- <el-form-item label="消息类型" prop="typeId">
            <el-select v-model="form.typeId" placeholder="请选择">
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="消息类型" prop="typeVal">
            <el-input v-model="form.typeVal" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消息标题" prop="title">
            <el-input v-model="form.title" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="消息内容" prop="content">
        <editor v-model="form.content" :min-height="192" readOnly />
      </el-form-item>
      <!-- <el-form-item label="消息内容" prop="content">
        <div class="content" v-html="form.content"></div>
      </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">返回</el-button>
      </div>
    </el-dialog>

    <!-- 人员设置 -->
    <el-dialog :title="title" :visible.sync="openperson" append-to-body>
      <el-form
        :model="queryParams"
        ref="queryParams"
        v-show="showSearch"
        :inline="true"
        label-width="80px"
      >
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入姓名/手机号"
            learable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >查看</el-button
          >
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addPeoper"
            >添加人员</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            >批量删除</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button plain icon="el-icon-plus" size="mini" @click="release"
            >发布</el-button
          >
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableList"
        @selection-change="handleSelectionChange"
        :border="true"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="姓名"
          prop="dictLabel"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="部门"
          prop="dept.deptName"
          align="center"
          el-table-column
        />
        <el-table-column label="工种" prop="dictLabel" align="center" />
        <el-table-column label="岗位" prop="dictLabel" align="center" />
        <el-table-column label="发布状态" prop="status1">
           <el-switch v-model="form.status1" disabled></el-switch>
        </el-table-column>
        <el-table-column label="读取状态" prop="status">
          <el-switch v-model="form.status" disabled></el-switch>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加人员 -->
    <el-dialog
      title="添加人员"
      class="add-person"
      :visible.sync="open3"
      width="800px"
      append-to-body
    >
      <ul class="tabs">
        <li
          v-for="(item, i) in tabs"
          :key="i"
          @click="handleClick(item)"
          :class="{ active: curTabs == item }"
        >
          {{ item }}
        </li>
      </ul>
      <el-form
        ref="form3"
        :model="form3"
        :rules="rules3"
        :validate-on-rule-change="false"
        label-width="80px"
      >
        <el-form-item v-if="curTabs == '部门'" label="所属部门" prop="department">
          <treeselect
            v-model="form3.department"
            :multiple="true"
            :options="deptOptions"
            :show-count="true"
            placeholder="请选择归属部门"
          />
        </el-form-item>
        <el-form-item v-if="curTabs == '工种'" label="工种" prop="typeWork">
          <el-select v-model="form3.typeWork" placeholder="请选择">
            <el-option
              v-for="item in roleOptions"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="curTabs == '岗位'" label="岗位" prop="post">
          <el-select v-model="form3.post" placeholder="请选择">
            <el-option
              v-for="item in roleOptions"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm3">确 定</el-button>
        <el-button @click="cancel3">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          <el-button type="warning" plain size="mini" @click="importTemplate">下载模板</el-button>
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import UploadImage from "@/components/ImageUpload";
import Editor from "@/components/Editor";

import { getPage, listData, getData, addData, updateData, delData, delMultiData } from "@/api/notice/notice";
import { getDict } from "@/api/select";
export default {
  name: "systemNotice",
  data() {
    return {
      queryParams: {
        currentPage: 1,
        pagesize: 10,
        keywords: undefined,
        category: 1,
        theType: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      showSearch: true,
      loading: true,
      tableList: [],
      ids: [],
      single: true,
      multiple: true,
      total: 0,
      openset: false, //显示消息
      form: {},
      typeOptions: [],  //消息类型




      radio: "1",
      // 开始时间
      valuestater: "",
      // 结束时间
      valueend: "",
      // 上传图片
      imageUrl: "",
      // 角色选项
      roleOptions: [],
      // 查询参数
      

      moreForm: {
        license: "",
        creditCode: "",
        contacts: "",
        phone: "",
        synopsis: "",
      },
      // 显示搜索条件
      
      /**功能按钮 */
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        openset: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        // url: process.env.VUE_APP_BASE_API + "/system/user/importData",
        url: "",
      },
      /**表格展示 */
      // 遮罩层
      
      /** 弹框部分-------- */
      // 弹出层标题
      title: "",
      // 是否显示弹出层（修改）
      open: false,
      /* 显示弹窗 */
      
      // 人员设置弹窗
      openperson: false,
      // 添加人员弹窗
      open3: false,
      // 表单参数
      
      form2: {
        deptId: null,
        roleIds: null,
      },
      form3: {
        nickName: null,
        deptId: null,
        roleIds: null,
        typeWork:null,
        post:null,
        department:null
      },
      mainForm: {
        fullName: "",
        shorterName: "",
        logo: "",
        trade: "",
        website: "",
        realmName: "",
        status: false,
        id: "72020",
      },
      // 表单校验
      rules3: {},
      queryParams: {
        deptId: undefined,
        keywords: undefined,
      },
      // 表单校验
      rules: {
        // messageTitl: [
        //   { required: true, message: "标题不能为空", trigger: "blur" },
        //   {
        //     min: 2,
        //     max: 10,
        //     message: "长度在 2 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
      //  messageContent: [
      //     { required: true, message: "消息内容不能为空", trigger: "blur" },
      //   ],
      },
      // 部门树选项
      deptOptions: undefined,
      // 角色选项
      roleOptions: [],
      // 状态数据字典
      statusOptions: [],
      open2: false,
      loading2: true,
      tableList2: [],
      tabs: ["部门", "工种", "岗位"],
      curTabs: "部门",
    };
  },
  components: {
    Treeselect,
    UploadImage,
    Editor,
  },
  created() {
    this.getList();
    this.getSelectDict()  //获取数据字典  32-消息类型
  },
  mounted() {},
  methods: {
    getList() {
      this.loading = true;
      this.queryParams.dictId = this.currentId;
      listData(this.queryParams).then( response => {
        this.tableList = response.result.rows;
        this.total = response.result.total; 
        this.loading = false;
      });
    },
    getSelectDict() {
      let tid = 32, platform = 0
      getDict(tid, platform).then( response => {
        this.typeOptions = response.result.data; //32-消息类型
      });
    },
    handleQuery() {
      this.queryParams.currentPage = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 消息显示
    displaypop(row) {
      this.reset();
      const theId = row.theid
      getData(theId).then(response => {
        this.form = response.result;
        this.openset = true;
      });
    },
    reset() {
      this.form = {
        typeVal: undefined,
        title: undefined,
        content: undefined,
      };
      this.resetForm("form");
    },




    
    
    handleClick(tab) {
      this.curTabs = tab;
    },
    submitForm3() {
      this.$refs["form3"].validate((valid) => {
        if (valid) {
          /* addRole(this.form).then(response => {
            this.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          }); */
          this.msgSuccess("添加成功");
          this.open3 = false;
          this.getList2();
        }
      });
    },

    // 取消按钮
    cancel3() {
      this.open3 = false;
      this.reset3();
    },
    
    

    /** 功能按钮部分 */
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    /* 人员设置按钮操作 */
    handleSee() {
      this.reset();
      // 调接口 获取对应管理员数据
      var res = tableDataDetail;
      this.form = res.data;
      this.form.roleIds = res.data.roleIds;
      this.openperson = true;
      this.title = "人员设置";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const userId = row.userId || this.ids;
      // 调接口 获取对应管理员数据
      var res = tableDataDetail;
      this.form = res.data;
      this.form.roleIds = res.data.roleIds;
      this.open = true;
      this.title = "修改";
      /* getRole(userId).then(response => {
            this.form = response.data;
            this.open = true;
            this.title = "修改角色";
        }); */
    },
    // 添加人员
    addPeoper() {
      this.open3 = true;
      this.title = "添加人员";
    },

    // 显示按钮
    
    // 查看按钮
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.userId || this.ids;
      this.$confirm(
        '是否确认删除?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          // 调接口
          // return delRole(userIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    // 发布
    release() {
      this.$confirm("是否确认发布?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "放弃",
        type: "warning",
      })
        .then(function () {
          // 调接口
          // return delRole(userIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("发布成功");
        });
    },
    /** 下载模板操作 */
    importTemplate() {
      /* importTemplate().then(response => {
        this.download(response.msg);
      }); */
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 表单重置
    
    //置顶按钮
    topping(row) {
      const userIds = row.userId || this.ids;
      this.$confirm(
        '是否确认置顶?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          // 调接口
          // return delRole(userIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("置顶成功");
        });
    },
    /** 弹框部分--------------------- */
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.userId != undefined) {
            /* updateRole(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }); */
            this.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          } else {
            /* addRole(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }); */
            this.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
  },
};
</script>

<style scoped lang="scss">
// /deep/
// 图片上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-table .active {
  color: #409eff;
  cursor: pointer;
}
/* /deep/ .el-dialog:not(.is-fullscreen){
	min-height: 420px;
} */
.add-person /deep/ .el-dialog__body {
  padding: 0 20px 30px;
  min-height: 300px;
}
.tabs {
  width: 100%;
  height: 40px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  li {
    padding: 4px 10px;
    color: #409eff;
    margin-right: 20px;
    cursor: pointer;
  }
  li.active {
    background: #409eff;
    color: #fff;
  }
}
.vue-treeselect__input {
  display: block;
}
/deep/ .vue-treeselect__control {
  height: 32px;
  line-height: 32px;
  margin-top: 3px;
}
</style>